<template>
  <el-container>
    <el-main>
      <el-card class="box-card" style="font-size: 12px;">
        <el-row>
          <el-col :span="8">
            用户名称：
            <el-input
              placeholder="请输入内容"
              v-model="formData.userName"
              clearable
              style="width: 220px;"
              :disabled="true"
            ></el-input>
          </el-col>

          <el-col :span="7">
            支付方式：
            <el-select v-model="formData.paymentId" placeholder="请选择" clearable>
              <el-option
                v-for="item in payoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">
            订单编号：
            <el-input placeholder="请输入内容" v-model="formData.id" clearable disabled="true" style="width: 220px;"></el-input>
          </el-col>

          <el-col :span="7">
            订单状态：
            <el-select v-model="formData.state" placeholder="请选择" clearable>
              <el-option
                v-for="item in stateoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :color="item.color"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            
            <el-button type="primary" @click="clickQuery">查询</el-button>
            <el-button plain>重置</el-button>
         
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">
            用户ID：
            <el-input placeholder="请输入内容" v-model="formData.userId" clearable style="width: 230px;"></el-input>
          </el-col>

          <el-col :span="7">
            手机号码：
            <el-input
              placeholder="请输入内容"
              v-model="formData.userTel"
              clearable
              style="width: 215px;"
            ></el-input>
          </el-col>

         
        </el-row>

        <!-- <el-form-item label="订单类型">
          <el-select v-model="formData.orderType" placeholder="请选择">
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-card>
      <br />
      <!-- ===================表格======================= -->
      <el-card class="box-card">
        <el-table :data="tableData" height="350" border style="width: 100%">
          <el-table-column prop="createTime" label="开始日期" width="180"></el-table-column>
          <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
          <el-table-column prop="totalPrice" label="商品金额" width="180"></el-table-column>
          <el-table-column prop="userTel" label="手机号" width="180"></el-table-column>

          <el-table-column prop="state" label="状态" width="180">
            <template #default="{ row }">
              <span :style="{ color: getColor(row.state) }">{{ getStateText(row.state) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paymentId" label="支付方式" width="180">
            <template #default="{ row }">
              <span :style="{ color: getColor1(row.paymentId) }">{{ getStateText1(row.paymentId) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="customName" label="操作" width="180">
            <template slot-scope="scope">
              <a @click="lenddetail(scope.row.id)" style="color:dodgerblue;">详情</a>&nbsp;
            </template>
          </el-table-column>

          <!-- <el-table-column prop="address" label="客户地址"></el-table-column> -->
        </el-table>
      </el-card>
    </el-main>
    <!-- ===============表格分页============================= -->
    <el-footer style="background-color: #ffffff;">
      <el-card class="box-card">
        <el-row>
          <el-col></el-col>
          <el-col :span="6" :offset="15">
            <el-pagination
              bcakground
              :page-sizes="[5,10,15,20]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total,sizes,prev,pager,next"
              :total="total"
              @next-click="nextPage"
              @prev-click="forwordone"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      payoptions: [
        { label: "支付宝", value: 1, color: "blue" },
        { label: "微信", value: 2, color: "blue" }
      ],
      stateoptions: [
        { label: "办理中", value: 0, color: "yellow" },
        { label: "代付款", value: 1, color: "green" },
        { label: "已付款", value: 2, color: "#808080" },
        { label: "已发货", value: 3, color: "#FFA500" },
        { label: "已签收", value: 4, color: "green" },
        { label: "已取消", value: 5, color: "red" }
        // { label: "请选择", value: "", color: "blue" }
      ],

      total: 0,
      pageSize: 5,
      pageNum: 1,
      isCollapse: true,
      formData: {
        id: "",
        userName: "",
        paymentId: "",
        createTime: "",
        orderNumber: "",
        shixiaoTime: "",
        state: "",
        productName: "",
        paymentStatus: "",
        userTel: "",
        userId: ""
      },
      activeIndex: "1",
      menuItems: [
        { icon: require("../../assets/执行请求.png"), description: "执行请求" },
        {
          icon: require("../../assets/整理态 [转换].png"),
          description: "整理态"
        },
        { icon: require("../../assets/查看事例.png"), description: "查看事例" },
        { icon: require("../../assets/耳机.png"), description: "耳机" },
        {
          icon: require("../../assets/密码 验证码.png"),
          description: "验证码"
        },
        { icon: require("../../assets/通话保持.png"), description: "通话保持" },
        { icon: require("../../assets/静音.png"), description: "静音" },
        {
          icon: require("../../assets/外呼-copy.png"),
          description: "外呼"
        },
        { icon: require("../../assets/发送短信.png"), description: "发送短信" },
        {
          icon: require("../../assets/M_结束会话.png"),
          description: "结束会话"
        },
        { icon: require("../../assets/退出.png"), description: "退出" }
      ]
    };
  },
  methods: {
    resetForm() {
      this.formData = [];
    },
    getStateText(state) {
      switch (state) {
        case 0:
          return "办理中";
        case 1:
          return "待付款";
        case 2:
          return "已付款";
        case 3:
          return "已付款";
        case 4:
          return "已签收";
        case 5:
          return "已取消";
      }
    },
    getColor(state) {
      switch (state) {
        case 1:
          return "yellow";
        case 2:
          return "red";
        case 3:
          return "green";
        case 4:
          return "gray";
        case 5:
          return "black";
      }
    },
    getStateText1(state) {
      switch (state) {
        case 1:
          return "支付宝";
        case 2:
          return "微信";
        default:
          return "其他";
      }
    },
    getColor1(state) {
      switch (state) {
        case 1:
          return "blue";
        case 2:
          return "green";
        default:
          return "black";
      }
    },

    clickQuery() {
      this.pageNum = 1;
      this.queryAllOrder();
    },
    queryAllOrder() {
      //查询方法 pageNum,pageSize
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.formData;
      this.$axios.post("api/order-server/queryAllOrder", params).then(res => {
        if (res.data.code == 200) {
          // console.log( res.data.data.list)
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          console.log(this.tableData);
        }
      });
    },
    lenddetail(val) {
      this.$router.push({
        path: "/ZYproductListDetail",
        query: {
          id: val
        }
      });
    },
    onCurrentChange(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    onSizeChange(val) {
      //最新的pageSize
      this.pageNum = 1;
      this.pageSize = val;
      this.queryAllOrder();
    },
    forwordone(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    navigateToComponentA() {
      this.$router.push("/orderQuery");
    },
    navigateToComponentB() {
      this.$router.push("/logisticsQuery");
    },
    navigateToComponentC() {
      this.$router.push("/afterSaleQuery");
    },
    navigateToComponentD() {
      this.$router.push("/userQuery");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.queryAllOrder();
  }
};
</script>

<style scoped>
.menu-with-icons.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去除下划线 */
}

.menu-item-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.icon-description {
  margin-top: -20px;
  font-size: 10px;
}

.menu-item-with-icon img {
  width: 20px;
  height: auto;
}

.el-header {
  background-color: #ffffff;
}

.el-aside {
  background-color: #f4f4f4;
}

.el-main {
  background-color: #ffffff;
}

.el-footer {
  background-color: #f4f4f4;
}
.label {
  font-weight: normal;
}
.value {
  font-weight: bold;
}
</style>